<template>
  <div class="tradeContainer">

    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar fixed title="网易严选" left-text="返回">
        <template #left>
          <router-link to="/home">
            <van-icon name="wap-home-o" size='30px' />
          </router-link>

        </template>
        <template #right>

          <van-icon name="search" size="30" />
          <router-link to="/cart">
            <van-icon name="cart-circle-o" dot=true size="30" />
          </router-link>
        </template>
      </van-nav-bar>

    </div>

    <!-- 地址  -->
    <!--      disabled-text="以下地址超出配送范围"  -->
    <div class="address">
      <van-contact-card type="edit" :tel="payInfo.consigneeTel" :name="payInfo.name" @click="onEdit" />
    </div>
  </div>

  <!-- 可切换的地方 -->
  <div>
    <!-- 优惠卷 -->
    <div>
      <!-- 优惠券单元格 -->
      <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <!-- 优惠券列表 -->
      <van-popup v-model:show="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
      </van-popup>
    </div>

    <!-- 商品合计
    <div class="addPrice">
      <div class="item">
        <div class="name">商品合计</div>
        <div class="price"> ￥399.00</div>
      </div>
      <div class="item">
        <div class="name">商品合计</div>
        <div class="price"> ￥399.00</div>
      </div>

      <div class="item">
        <div class="name">商品合计</div>
        <div class="price"> ￥399.00</div>
      </div>

      <div class="item">
        <div class="name">商品合计</div>
        <div class="price"> ￥399.00</div>
      </div>

    </div> -->

    <!-- 商品详情跳转 -->
    <div class="goodsList">
      <div class="goodsTitle">
        <span>包裹1</span> 受大促销影响，预计1-4天发货
      </div>
      <van-card v-for="(item,index) in cardList1" :key="index" tag="标签" :price="item.orderPrice" :desc="item.skuName" title="商品标题" :thumb="item.imgUrl" />
    </div>
    <!-- 网易严选服务协议 -->

    <!-- <van-checkbox v-model="checked" shape="square">复选框</van-checkbox> -->
    <van-radio-group v-model="checked" class="agreement" @click="to">
      <van-radio name="1" shape="square">
        <div>我已同意<a href="https://m.you.163.com/help/new#/37/70">《网易严选服务协议》</a></div>
      </van-radio>

    </van-radio-group>

    <!-- 提交订单 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" @click="play" />

    <!-- <component :is="componentId===false?Adders:Order"></component> -->

    <!-- 二维码 弹框 -->
    <van-action-sheet v-model:show="show" title="标题" @close='no'>

      <img style="height:200px; width:200px; margin-left:80px;" :src="qrImg" alt="">
    </van-action-sheet>
  </div>

</template>

<script lang="ts">
import Adders from './component/Address/Address.vue';
import Order from './component/Order/Order.vue';

import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
  name: 'Trade',
  comments: {
    Adders,
    Order
  }
});
</script>

<script lang="ts" setup>
import { Toast } from 'vant';
import { reactive } from 'vue';
import { reqTradeInfoData, reqSubmitTradeOrder, reqGetPayQRcode, reqPayState } from '../../api/cart';
import QRcode from 'qrcode';
import { useRouter } from 'vue-router';

// 地址相关
const payInfo = reactive({
  name: '哈温',
  consigneeTel: '13410251616',
  deliveryAddress: '西安市莲湖区土门街道',
  paymentWay: 'ONLINE',
  orderComment: '',
  orderDetailList: []
});
const onEdit = () => Toast('edit');
// 优惠卷相关
const coupon = {
  available: 1,
  condition: '无门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};

const coupons = ref([coupon]);
const showList = ref(false);
const chosenCoupon = ref(-1);
const show = ref(false);
const shopList = ref([]);
const money = ref();
const tradeNo = ref();
const qrImg = ref();
const cardList1 = ref([]);

const router = useRouter();

// 提交订单点击事件
const onSubmit = () => {
  show.value = true;
};
// onMounted(async () => {
//   const a: any = await reqTradeInfoData();
//   console.log(a, 'a');
//   cardList1.value = a.detailArrayList;
// });
onMounted(async () => {
  const result: any = await reqTradeInfoData(); //提交商品的订单信息。渲染的
  // console.log(result, 'result');
  cardList1.value = result.detailArrayList;
  shopList.value = result.detailArrayList;
  money.value = result.totalAmount;
  tradeNo.value = result.tradeNo;
  payInfo.orderDetailList = result.orderDetailVoList[0].orderDetailList;
  // console.log(result);
});
const timer = ref();
const play = async () => {
  show.value = true;
  const orderId = await reqSubmitTradeOrder(tradeNo.value, payInfo); //提交订单
  // console.log(2222222222222);
  const result: any = await reqGetPayQRcode(orderId); //生成二维码
  // console.log(result, '33333333');

  QRcode.toDataURL(result.codeUrl).then((url: any) => {
    qrImg.value = url;
    timer.value = setInterval(async () => {
      const result: any = await reqPayState(orderId); //支付状态 // console.log(result, '66666666');
      // console.log(result, 'result');
      Toast.success('支付成功！');
      if (!result) {
        timer.value = false;
        clearInterval(timer.value);
        router.push('/Home');
      } else {
        console.log('支付失败');
        timer.value = false;
        clearInterval(timer.value);
      }
    }, 1000);
  });
};

// const no = () => {
//   clearInterval(timer.value);
//   timer.value = false;
// };
</script>

<style lang='less' scoped>
.tradeContainer {
  .header {
    .van-nav-bar__title.van-ellipsis {
      font-weight: bold;
    }
  }
  .address {
    margin: 50px 0 10px 0;
  }
}
.addPrice {
  margin: 10px 0;
  font-size: 12px;

  .item {
    background-color: #fff;
    border-bottom: 1px solid #aaa;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
  }
}
.goodsList {
  padding: 10px;
  background-color: #fff;
  .goodsTitle {
    font-size: 10px;
    color: #aaa;
    span {
      font-size: 14px;
      color: black;
      margin-right: 4px;
    }
  }
}
.agreement {
  margin: 10px 0 0 10px;
  font-size: 12px;
  color: #999;
}
.content {
  padding: 16px 16px 160px;
}
</style>